<template>
  <div>
    <MainGrid>
      <!--   工具栏   -->
      <template #tool-line>
        <a-button type="danger" @click="handleDelete('multiple')">批量删除</a-button>
        <a-button type="primary" @click="handleOpenAddModal">新增靓号</a-button>
      </template>
      <!--   表格   -->
      <template #main>
        <a-table :row-selection="rowSelection" :loading="isLoading" :pagination="paginationObj" :dataSource="dataSource"
                 :columns="columns" bordered>
          <template #bodyCell="{ column, text, record }">
            <template v-if="column.dataIndex === 'level'">
              <a-tag color="green">{{ record.level.label }}</a-tag>
            </template>
            <template v-else-if="column.dataIndex === 'status'">
              <a-tag color="green" v-if="record.status.key === 1">{{ record.status.label }}</a-tag>
              <a-tag color="red" v-else-if="record.status.key === 2">{{ record.status.label }}</a-tag>
            </template>
            <template v-else-if="column.dataIndex === 'operation'">
              <a-space>
                <a-button type="primary" @click="handleEdit(record)">修改</a-button>
                <a-button type="primary" @click="handleDelete(record)" danger>删除</a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </template>
    </MainGrid>
    <AddForm ref="addFormRef"/>
    <EditForm ref="editFormRef"/>
  </div>
</template>

<script setup lang="ts">
import {createVNode, onMounted, ref} from "vue";
import {message, Modal} from "ant-design-vue";
import type {TableProps} from 'ant-design-vue'
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";

import {
  dataSource,
  columns,
  prettyStore,
  paginationObj,
  isLoading
} from "@/views/Pretty/Main/config";
import AddForm from "@/views/Pretty/Main/AddForm/AddForm.vue";
import MainGrid from '@/components/MainGrid/MainGrid.vue'
import EditForm from '@/views/Pretty/Main/EditForm/EditForm.vue'
import {IListItem} from "@/views/Pretty/Main/types";
import {PRETTY_LIST_DEFAULT_PAGE_SIZE} from "@/constants/data";

onMounted(async () => {
  await prettyStore.requestPrettyListAction({
    current_page: 1,
    page_size: PRETTY_LIST_DEFAULT_PAGE_SIZE
  })
  isLoading.value = false
})

const addFormRef = ref<InstanceType<typeof AddForm>>(null)
const handleOpenAddModal = () => {
  addFormRef.value.handleAddUserModal(true)
}

// 多删
const selectedItems = ref<Array<IListItem>>()
const rowSelection: TableProps['rowSelection'] = {
  onChange: (selectedRowKeys: Array<any>, selectedRows: IListItem[]) => {
    selectedItems.value = selectedRows
  },
};
// 编辑
const editFormRef = ref<InstanceType<typeof EditForm>>(null)
const handleEdit = async (record: IListItem) => {
  const id = record.id
  await prettyStore.requestPrettyDetailAction({id})
  editFormRef.value.handleEditModal(true)
}
// 单删
const handleDelete = (type: string = "single", record?: IListItem) => {
  let id: Array<number> | number
  if (type === "multiple") {
    if (!selectedItems.value?.length) {
      message.error("请选择要删除的选项")
      return
    }
    id = selectedItems.value!.map(item => item.id)
  } else {
    id = record!.id
  }
  Modal.confirm({
    title: '确定要删除靓号吗？',
    icon: createVNode(ExclamationCircleOutlined),
    okText: '确定',
    cancelText: "取消",
    onOk() {
      return new Promise((async (resolve, reject) => {
        const flag = await prettyStore.deletePrettyAction({
          id
        })
        flag ? resolve("操作成功") : reject()
      }))
    },
  });
}
</script>

<style lang="less" scoped></style>
